<template>
  <div class="Abnormal">
    <!-- 异常 -->
    <div class="filter_container">
      <el-form :inline="true" :model="Abnormalform" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="deptIds" size="small" placeholder="请选择城市" multiple @visible-change='citydataList' @change="getdeptIdsIds" ref='deptNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起日期">
          <el-date-picker v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期" :clearable='false'
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Abnormalform,Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" icon="el-icon-download" @click="handleExport(Abnormalform,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="Abnormal-list">
      <el-table :data="AbnormalList" border style="width: 100%">
        <!-- <el-table-column label="全国订单数据" align='center'> -->
        <el-table-column label="后台单号" width="180" prop="xmbzNo" fixed>
        </el-table-column>
        <el-table-column label="下单日期" width="180" prop='orderTime' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送时间" width="180" prop="deliveryTime" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="投诉日期" width="180" prop="createTime" :show-overflow-tooltip="true">
        </el-table-column>
        <!--  <el-table-column label="送货日期" width="120" prop="date">
        </el-table-column> -->
        <el-table-column label="投诉内容" width="180" prop="abnormalContent" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="处理内容" width="180" prop="processingResults" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="投诉失误部门" prop="responsibleDepartmentErrorText" width="200" align="center"></el-table-column>
        <!-- <el-table-column label="投诉部门" width="80" prop="responsibleDepartment" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="失误类型" width="180" prop="departmentErrorType" :show-overflow-tooltip="true">
        </el-table-column> -->
        <el-table-column label="款式" width="240" prop="goodsName" :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column label="入库时间" width="120" prop="orderer">
        </el-table-column> -->
        <el-table-column label="签收时间" width="180" prop="receivedTime" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="分仓" width="120" prop='branchWarehouse' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="登记人" width="120" prop='operator' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="责任人" width="120" prop='personLiable' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="城市" width="120" prop='deptName' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="投诉渠道" width="120" porp='abnormalChannel' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="下单渠道" width="120" prop='channelName' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="补偿金额" width="120" prop='refundAmount' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="紧急程度" width="120" prop="complaintLevel" fixed="right">
        </el-table-column>

        <!-- </el-table-column> -->
      </el-table>

    </div>
  </div>
</template>

<script>
  import {
    deptdepts,
    getExcelShowData
  } from "@/api/statistics"
  export default {
    data() {
      return {
        deptIds: [],
        Abnormalform: {
          excelType: 'ABNORMAL', //订单统计
          deptIds: '',
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
        },
        cityList: [], //城市
        AbnormalList: [ //全国订单数据
        ],
        deptIdsIdslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getOrderList();
      window.addEventListener("keydown", this.keyupEnter);
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },

    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['deptNameRef'].blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
          this.handleFilter(this.Abnormalform,this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },

      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
        });
      },
      getOrderList() {
        // 订单列表分页
        getExcelShowData(this.Abnormalform).then(response => {
          this.AbnormalList = response.data.data;
        });
      },
      getdeptIdsIds(data) {
        this.deptIdsIdslist = data;
      },
      handleFilter(Abnormalform, times) { //查询
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Abnormalform.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Abnormalform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Abnormalform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.dayjs(
            times[0]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        var time2 = Date.parse(this.dayjs(
            times[1]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getOrderList();
        }
      },
      handleExport(Abnormalform, times) { //导出统计
        let {
          deptIds = '',
        } = this.Abnormalform
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Abnormalform.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Abnormalform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Abnormalform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.dayjs(
            times[0]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        var time2 = Date.parse(this.dayjs(
            times[1]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadExcel?excelType=ABNORMAL&startTime=${this.Abnormalform.startTime}&endTime=${this.Abnormalform.endTime}&deptIds=${Abnormalform.deptIds}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      }
    }

  }
</script>

<style lang='scss' scoped>
  .Nationalorders {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
</style>
